import echarts from '@/components/baseECharts/config'
import type { PathStyle, TextStyle } from '@/types/echarts'
/**
 * 将数值转换成角度值
 * @param value 角度值
 * @returns
 */
export const toAngle = (value: number) => {
    return (value * Math.PI) / 180
}

/**
 * 获取圆上某点的坐标
 * @param cx 圆心的X轴坐标值
 * @param cy 圆心的Y轴坐标值
 * @param r 圆的半径
 * @param angle 点在圆上的角度
 * @returns
 */
export const getCirclePoint = (cx: number, cy: number, r: number, angle: number) => {
    const angleValue = toAngle(angle)
    const x = cx + r * Math.cos(angleValue)
    const y = cy + r * Math.sin(angleValue)
    return { x, y }
}
/**
 * 获取矩形内切圆的半径
 * @param width 矩形宽度
 * @param height 矩形高度
 * @returns
 */
export const getInscribedCircleRadius = (width: number, height: number) => {
    return Math.min(width, height) / 2
}
/**
 * 自定义圆
 * @param cx 圆心的X轴坐标值
 * @param cy 圆心的Y轴坐标值
 * @param r 圆的半径
 * @param pathStyle 圆的样式
 * @returns
 */
export const customCircle = (cx: number, cy: number, r: number, pathStyle?: PathStyle) => {
    return new echarts.graphic.Circle({
        name: 'circle',
        shape: { cx, cy, r },
        style: {
            fill: '#fff',
            lineWidth: 0,
            stroke: '#fff',
            ...pathStyle,
        },
    })
}
/**
 * 自定义圆弧
 * @param cx 弧心的X轴坐标值
 * @param cy 弧心的Y轴坐标值
 * @param r 弧的半径
 * @param startAngle 弧的开始角度
 * @param endAngle 弧的结束角度
 * @param pathStyle 弧的样式
 * @returns
 */
export const customArc = (cx: number, cy: number, r: number, startAngle: number, endAngle: number, pathStyle?: PathStyle) => {
    return new echarts.graphic.Arc({
        name: 'arc',
        shape: { cx, cy, r, startAngle: toAngle(startAngle), endAngle: toAngle(endAngle) },
        style: {
            lineWidth: 1,
            stroke: '#fff',
            fill: 'transparent',
            ...pathStyle,
        },
    })
}
export const customImage = () => {
    return new echarts.graphic.Image({
        name: 'image',
        style: {
            image: 'https://echarts.apache.org/examples/data/asset/img/custom-gauge-panel.png',
            x: 0,
            y: 0,
            width: 0,
            height: 0,
        },
        clipPath: (() => {
            return {
                type: 'sector',
                shape: {},
            } as any
        })(),
    })
}
/**
 *
 * @param width 矩形宽度
 * @param height 矩形高度
 * @param r 矩形的圆角
 * @param x 矩形左上角X轴位置
 * @param y 矩形左上角Y轴位置
 * @param pathStyle 样式
 * @returns
 */
export const customRect = (width: number, height: number, r: number | number[], x: number, y: number, pathStyle?: PathStyle) => {
    return new echarts.graphic.Rect({
        name: 'rect',
        shape: { width, height, r, x, y },
        style: { ...pathStyle },
    })
}
/**
 * 自定义矩形图片背景标题
 * @param width 矩形宽度
 * @param height 矩形高度
 * @param x 矩形左上角X轴位置
 * @param y 矩形左上角Y轴位置
 * @param imageUrl 背景图片URL
 * @param text 文字内容
 * @param textStyle 其他文字样式
 * @returns
 */
export const customRectTitle = (width: number, height: number, x: number, y: number, imageUrl: string, text: string, textStyle?: TextStyle) => {
    const rect = new echarts.graphic.Rect({
        shape: { width, height, x, y },
        style: { fill: { image: imageUrl, repeat: 'no-repeat', x, y } },
    })
    const title = customAlignCenterText(text, x + width / 2, y + height / 2, textStyle)
    return [rect, title]
}
/**
 * 自定义文字
 * @param text 文字内容
 * @param width 文字背景宽度
 * @param height 文字背景高度
 * @param x 文字背景左上角X轴位置
 * @param y 文字背景左上角Y轴位置
 * @param textStyle 其他文字样式
 * @returns
 */
export const customText = (text: string, width: number, height: number, x: number, y: number, textStyle?: TextStyle) => {
    return new echarts.graphic.Text({
        style: {
            align: 'center',
            verticalAlign: 'middle',
            text,
            width,
            height,
            lineHeight: height,
            x: x + width / 2,
            y: y + height / 2,
            fontSize: 16,
            fill: 'white',
            ...textStyle,
        },
    })
}
/**
 * 自定义中心水平对齐文字
 * @param text 文字内容
 * @param x 文字中心X轴位置
 * @param y 文字中心Y轴位置
 * @param textStyle 其他文字样式
 * @returns
 */
export const customAlignCenterText = (text: string, x: number, y: number, textStyle?: TextStyle) => {
    return new echarts.graphic.Text({
        style: {
            align: 'center',
            verticalAlign: 'middle',
            text,
            x,
            y,
            fontSize: 16,
            fill: 'white',
            ...textStyle,
        },
    })
}
